<template>
  <!-- 导出设备数据 -->
  <div v-drag>
    <div class="mask" @click="closeTip(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>选择导出权限数据</p>
        <i @click="closeTip(false)"></i>
      </div>
      <div class="box_body bind_box">
        <div>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
          </el-checkbox>
          <el-checkbox-group v-model="checkList" @change="handleCheckItemChange">
            <el-checkbox v-for="(item,index) in tableInfo" :key="index" :label="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="box_foot">
        <span @click="closeTip(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import {getSelect, exportPermission} from "@/api/permission";

export default {
  props: ['menuId'],
  data() {
    return {
      loading: false,
      tableInfo: [],
      list: [],
      checkList: [],
      checkAll: false,
      isIndeterminate: true,
      downBio: [],
    }
  },
  mounted() {
    this.getTable();
  },

  methods: {
    // 获取权限数据
    getTable() {
      let that = this;
      that.loading = true;
      let param = {parentId: -2}
      getSelect(param).then(res => {
        if (res.data) {
          if (res.data && res.data.length > 0) {
            let arr = [];
            res.forEach((item, i) => {
              if (item.id != 0) {
                arr.push({id: item.id, name: item.name})
              }
            })
            that.tableInfo = arr;
            that.getRowData();
          }
        } else {
          that.tableInfo = [];
        }
        that.loading = false;
      }).catch((e) => {
        that.tableInfo = [];
        that.loading = false;
      });
    },

    // 获取key
    getRowData() {
      let that = this;
      let arr = [];
      that.tableInfo.forEach((item, index) => {
        arr.push(item.id);
      })
      that.list = arr;
    },

    // 全选
    handleCheckAllChange(val) {
      this.checkList = val ? this.list : [];
      this.isIndeterminate = false;
    },

    // 单选
    handleCheckItemChange(val) {
      this.isIndeterminate = this.checkList.length !== this.list.length && this.checkList.length !== 0;
      this.checkAll = this.checkList.length === this.list.length;
    },

    // 确认
    confirmEdit() {
      let that = this;
      if (that.checkList && that.checkList.length === 0) {
        that.$message.error({
          message: '请先选择需要导出的权限',
          duration: 1500
        })
      } else {
        let keys = '';
        that.checkList.forEach((item, i) => {
          keys = keys + (i > 0 ? ',' : '') + item;
        });
        that.exportData(keys)
      }
    },

    // 导出
    exportData(key) {
      let that = this;
      that.loading = true;
      exportPermission({oneIds: key}, 'arraybuffer').then((res) => {
        that.downloadExcel(res);
        that.closeTip();
        that.$message.success({
          message: '导出成功！',
          duration: 1500
        });
        that.loading = false;
      })
    },

    // 下载Excel
    downloadExcel(data) {
      const link = document.createElement('a')
      let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob);
      link.download = '权限信息.xlsx' //下载的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },

    // 关闭
    closeTip(refresh) {
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style>
.bind_box {
  min-height: 300px;
}

.bind_box label {
  width: calc(50% - 15px);
  margin-bottom: 15px;
}

.bind_box label:nth-child(2n) {
  margin-right: 0;
}
</style>
